Ext.namespace('SLM');

SLM.landPanelRemote = function(config){
	
	this.proxy = "";
	if (Config.mode == 'local') {
		this.proxy = new Ext.data.HttpProxy({
			url: Config.baseUrl + 'resources/api/app.php'
		});
	} else {
		this.proxy = new Ext.data.ScriptTagProxy({
			url: Config.baseUrl + 'resources/api/app.php'
		})
	}
	
	var store = new Ext.data.JsonStore({
			proxy: this.proxy
		,	baseParams: { cmd: 'land-list' }
		,	root: 'records'
		,	totalProperty: 'total'
		,	id: 'land_id'
		,	fields: [
					'title'
				,	'land_id'
			]
		,	autoLoad: true
		,	sortInfo: {field: 'title', direction: 'ASC'}
	});

	var land = new Ext.grid.GridPanel({
			title: 'Property'	
		,	store: store	
		,	columns: [
				{ id:'title', header: "Title", width: 150, sortable: true, dataIndex: 'title' }
			]
		,	viewConfig: {
				forceFit: true
			}
		,	autoExpandColumn: 'title'	
		,	sm: new Ext.grid.RowSelectionModel({singleSelect:true})
		,	width: 170
		,	height: 300
		,	region: 'west'
		,	split: true
		,	border: false
		, listeners: {
				rowclick : function( grid, rowIndex, e ) {
					var data = grid.getSelectionModel().getSelected().data;
					var params = {
						"condition":"AND"
					,	items: [{
								"field": 'land_id'
							,	"condition": 'EQUAL'
							,	"value": data.land_id
						}]
					};
					species.store.load({ params: { filter: Ext.encode(params), limit:10 , start: 0} });
					events.store.load({ params: { filter: Ext.encode(params) } });
				}
			}
	});

	var speciesStore = new Ext.data.JsonStore({
			proxy: this.proxy
		,	baseParams: { cmd: 'dwc-list' }
		,	root: 'records'
		,	totalProperty: 'total'
		,	id: 'Id'
		,	fields: [
					'Family'
				, 'Genus'
				,	'ScientificName'
			]
	});

	var pagingBar = new Ext.PagingToolbar({
			pageSize: 10
		,	store: speciesStore
		,	displayInfo: false
	});

	var species = new Ext.grid.GridPanel({
			title: 'Checklist'
		,	store: speciesStore
		,	columns: [
				{id:'ScientificName', header: "Scientific Name", width: 150, sortable: true, dataIndex: 'ScientificName'}
			]
		,	viewConfig: {
				forceFit: true
			}
		,	bbar: pagingBar	
		,	autoExpandColumn: 'ScientificName'
		,	sm: new Ext.grid.RowSelectionModel({singleSelect:true})
		,	region: 'center'
		,	border: false
	});

	var events = new Ext.grid.GridPanel({
			title: 'Events'
		,	store: new Ext.data.JsonStore({
					proxy: this.proxy
				,	baseParams: { cmd: 'event-list' }
				,	root: 'records'
				,	totalProperty: 'total'
				,	id: 'event_id'
				,	fields: [
							'event_id'
						, 'title'
						,	'event_type'
						,	'date_start'
						,	'date_end'
					]
			})
		,	columns: [{
					id:'Title'
				,	header: "Title"
				,	width: 120
				,	sortable: true
				,	dataIndex: 'title'
			},{
					header: "Date"
				,	width: 100
				,	sortable: true
				,	dataIndex: 'date_start'
				,	renderer: this.renderDate
			}]
		,	viewConfig: {
				forceFit: true
			}
		,	sm: new Ext.grid.RowSelectionModel({singleSelect:true})
		,	width: 220
		,	autoExpandColumn: 'Title'
		,	split: true
		,	region: 'east'
		,	border: false
	});
		
	Ext.apply(this, config, {
			width: 600
		,	height: 300
		,	layout: 'border'
		,	border: true
		,	items: [land, species, events]
	});
		
	SLM.landPanelRemote.superclass.constructor.call(this, config);

};

Ext.extend(SLM.landPanelRemote, Ext.Panel, {
		renderDate: function( value ) {
			if ( value == '0000-00-00') {
				return('');
			} else {
				dt=new Date(value);
				return ( dt.format('M j, Y') );
			}
		}
});